<template>
	<view class="container">
		<image class="icon-image" :src="require('@/static/bicycle3.png')"></image>
		<view class="form-container">
			<!-- 登录视图 -->
			<view v-show="isLoginView" class="form">
				<uv-notify ref="notify"></uv-notify>
				<view class="input">
					<template>
						<uv-input v-model="loginUsername" type="text" placeholder="请输入用户名" fontSize="20px"
							border="bottom" placeholderStyle="color:#ffffff" color="#ffffff"></uv-input>
					</template>
				</view>
				<view class="input">
					<template>
						<uv-input v-model="loginPassword" type="password" placeholder="请输入密码" fontSize="20px"
							border="bottom" placeholderStyle="color:#ffffff" color="#ffffff"></uv-input>
					</template>
				</view>
				<view class="border-box">
					<button @click="login" class="button">登录</button>
				</view>

				<p @click="toggleView" class="switch-link">没有账号？点击注册</p>
			</view>

			<!-- 注册视图 -->
			<view v-show="!isLoginView" class="form">
				<view class="input">
					<template>
						<uv-input v-model="registerUsername" type="text" placeholder="请输入用户名" fontSize="20px"
							border="bottom" placeholderStyle="color:#ffffff" color="#ffffff"></uv-input>
					</template>
				</view>
				<view class="input">
					<template>
						<uv-input v-model="registerPassword" type="password" placeholder="请输入密码" fontSize="20px"
							border="bottom" placeholderStyle="color:#ffffff" color="#ffffff"></uv-input>
					</template>
				</view>
				<view class="border-box">
					<button @click="register" class="button">注册</button>
				</view>

				<p @click="toggleView" class="switch-link">已有账号？点击登录</p>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				apiUrl: '',
				isLoginView: true,
				loginUsername: '',
				loginPassword: '',
				registerUsername: '',
				registerPassword: '',
			};
		},
		mounted() {
			this.apiUrl = getApp().globalData.apiUrl;
		},
		methods: {
			/* 登录成功提示 */
			promptSuccess(msg) {
				this.$refs.notify.success(msg);
			},
			promptFail(msg) {
				this.$refs.notify.error(msg);
			},
			/* 登录注册转换 */
			toggleView() {
				this.isLoginView = !this.isLoginView;
			},
			login() {
				const backendURL = this.apiUrl + "/bicycle/doLogin";
				console.log(backendURL);
				/* 登录使用 */
				let loginUser = {
					username: '',
					password: '',
				};
				loginUser.username = this.loginUsername;
				loginUser.password = this.loginPassword;
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					data: JSON.stringify(loginUser), // 将对象转换为JSON字符串
					header: {
						'content-type': 'application/json' // 设置content-type为application/json
					},
					withCredentials: true, // 允许发送cookie
					success: (res) => {
						console.log('成功', res);
						if (res.data.code == 500) {
							this.promptFail(res.data.msg);
						}
						if (res.data.code == 200) {
							/* 封装好返回的用户信息并保存 */
							let user = res.data.data;
							console.log(user);
							/* 将token保存到本地变量 */
							// 1、首先在登录时，将tokenName和tokenValue以及user一起存储在本地，例如：
							let tokenName = res.data.data.saTokenInfo.tokenName;
							let tokenValue = res.data.data.saTokenInfo.tokenValue;
							uni.setStorageSync('tokenName', tokenName);
							uni.setStorageSync('tokenValue', tokenValue);
							uni.setStorageSync('user', user);
							/* 显示登录成功提示 */
							this.promptSuccess(res.data.msg);
							/* 跳转页面 */
							setTimeout(function() {
								/* 使用switchTab跳转到tabBar里 */
								uni.switchTab({
									url: '../tabBar/record/record',
								});
							}, 1000);
						}
					},
					fail: (res) => {
						this.promptFail(res.data.msg);
					}
				});
			},
			register() {
				const backendURL = this.apiUrl + "/bicycle/doRegister";
					console.log(backendURL);
					/* 登录使用 */
					let registerUser = {
						username: '',
						password: '',
					};
					registerUser.username = this.registerUsername;
					registerUser.password = this.registerPassword;
					uni.request({
						url: backendURL,
						method: 'POST',
						dataType: 'json',
						data: JSON.stringify(registerUser), // 将对象转换为JSON字符串
						header: {
							'content-type': 'application/json' // 设置content-type为application/json
						},
						success: (res) => {
							console.log('成功', res);
							if (res.data.code == 500) {
								this.promptFail(res.data.msg);
							}
							if (res.data.code == 200) {
								this.promptSuccess(res.data.msg);
								this.toggleView();
							}
						},
						fail: (res) => {
							this.promptFail(res.data.msg);
						}
					});
			},
		},
	};
</script>
<style>
	.container {

		justify-content: center;
		align-items: center;
		overflow: auto;
		height: 100vh;
		width: 100%;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;

		background: linear-gradient(to bottom right, #55AAFF, #76FAC7);
	}

	.icon-image {
		width: 100%;
		flex: 6;
	}

	.form-container {
		background-color: transparent;
		border-radius: 10px;
		flex: 1;
		margin-bottom: 40%;
		padding: 2px 30px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}

	.form {
		text-align: center;
	}

	.input {
		width: 100%;
		margin: 20px 0px;
		font-size: 30px;
		box-sizing: border-box;
		/* 保证宽度包括内边距和边框 */
		overflow: hidden;
		/* 防止内容溢出 */
		white-space: nowrap;
		/* 防止文本换行 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
	}


	.button {
		/* background: linear-gradient(to top left, #55AAFF, #76FAC7); */
		border: 5px solid transparent;
		border-radius: 16px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to left, #55AAFF, #76FAC7), linear-gradient(to top left, #55AAFF, #76FAC7);
		background-size: 200%;
		color: white;
		border-radius: 10px;
		padding: 10px 20px;
		cursor: pointer;
		transition: background .3s;
	}

	.button:after {
		border: none;
	}

	.button:hover {
		background-image: linear-gradient(to right, #F780A7, #76FAC7), linear-gradient(to top left, #55AAFF, #76FAC7);
		background-position: 100% 0;
	}


	.switch-link {
		cursor: pointer;
		color: #ffffff;
		font-size: 14px;
	}

	.switch-link:hover {
		text-decoration: underline;
	}
</style>